

<template>
  
    <el-row class="home" :gutter="20">
      <el-col :span="8">
        <el-card 
        :shadow="hover"
        >
          <div class="u-user">
            <img src="../assets/user.png" class="userimg">
            <div class="user-info">
              <p class="user-admin">Admin</p>
              <P class="user-chaoji">超级管理员</P>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录时间：<span style="margin-left: 30px;color: #333;">2024年12月2日</span></p>
            <p>上次登录地点：<span style="margin-left: 30px;color: #333;">北京</span></p>
          </div>
        </el-card>
        <el-card class="user-table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              v-for="(val,key) in tableLabel"
              :key="key"
              :prop="key"
              :label="val"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16">
        <div class="use">
          <el-card
            :body-style="{ display: 'flex', padding: 0 }"
            v-for="item in countData"
            :key="item.name"
            >
            <!-- {{ item.color }} -->
            <component  :is="item.icon" class="icons" :style="{ background: item.color }"></component>
            <div class="detail">
              <p class="num">￥{{ item.value }}</p>
              <p class="text">{{ item.name }}</p>
            </div>
          </el-card>
         
        </div>
        <el-card class="one-echart">
              <!-- <div ref="echart1"  style="height: 280px;"></div> -->
        </el-card>
        <div class="down">
          <el-card class="two-echart" >
              <div ref="echart2" style="height: 140px;width: 100%;"></div>
          </el-card>
          <el-card class="three-echart">
            <div ref="echart3" style="height: 140px;"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
 
</template>
<script setup>
import {ref,onMounted,getCurrentInstance} from 'vue'
import * as echarts from 'echarts'
const {proxy} = getCurrentInstance();

const echart1= ref();
const echart2 = ref();
const echart3 = ref();
let obServe;

const test = (()=>{
  const myChart1 = echarts.init(echart1.value);
    myChart1.resize();
    const myChart2 = echarts.init(echart2.value);
    myChart2.resize();
    const myChart3 = echarts.init(echart3.value);
    myChart3.resize();
  })
  const initObServer = (()=>{
    obServe = new ResizeObserver(test)
    obServe.observe(echart1.value)
  });


const generateData = (count) => {
    let baseValue = Math.random() * 1000;
    let time = +new Date(2011, 0, 1);
    let smallBaseValue;
    function next(idx) {
      smallBaseValue =
        idx % 30 === 0
          ? Math.random() * 700
          : smallBaseValue + Math.random() * 500 - 250;
      baseValue += Math.random() * 20 - 10;
      return Math.max(0, Math.round(baseValue + smallBaseValue) + 3000);
    }
    const categoryData = [];
    const valueData = [];
    for (let i = 0; i < count; i++) {
      categoryData.push(
        echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time, false)
      );
      valueData.push(next(i).toFixed(2));
      time += 1000;
    }
    return {
      categoryData: categoryData,
      valueData: valueData
    };
  }
// 绘制图表
const threeChart = ()=>{
  const myChart = echarts.init(echart3.value);

  const option = {
      title: {
        text: 'Stacked Line'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    };
    myChart.setOption(option)
}
const twoChart = () => {
    const  myChart = echarts.init(echart2.value);

    const  option = {
        title: [
          {
            text: 'Tangential Polar Bar Label Position (middle)'
          }
        ],
        polar: {
          radius: [30, '80%']
        },
        angleAxis: {
          max: 4,
          startAngle: 75
        },
        radiusAxis: {
          type: 'category',
          data: ['a', 'b', 'c', 'd']
        },
        tooltip: {},
        series: {
          type: 'bar',
          data: [2, 1.2, 2.4, 3.6],
          coordinateSystem: 'polar',
          label: {
            show: true,
            position: 'middle',
            formatter: '{b}: {c}'
          }
        }
      };
      myChart.setOption(option)
}
const oneChart = ()=>{
  const myChart = echarts.init(echart1.value);
  const dataCount = 5e5;
  const data = generateData(dataCount);

  const option = {
    title: {
      text: echarts.format.addCommas(dataCount) + ' Data',
      left: 10
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: false
        },
        saveAsImage: {
          pixelRatio: 2
        }
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      bottom: 90
    },
    dataZoom: [
      {
        type: 'inside'
      },
      {
        type: 'slider'
      }
    ],
    xAxis: {
      data: data.categoryData,
      silent: false,
      splitLine: {
        show: false
      },
      splitArea: {
        show: false
      }
    },
    yAxis: {
      splitArea: {
        show: false
      }
    },
    series: [
      {
        type: 'bar',
        data: data.valueData,
        // Set `large` for large data amount
        large: true
      }
    ]
  };
  myChart.setOption(option)
}


  const tableData = ref([
                    {
                        name: "java",
                        today: 300,
                        month: 200,
                        total: 500,
                      },
                      {
                        name: "Python",
                        today: 300,
                        month: 200,
                        total: 500,
                      }
                      ,
                      {
                        name: "C++",
                        today: 300,
                        month: 200,
                        total: 500,
                      }
                ])
  const countData = ref([
                {
                  name: '本月支付订单',
                  value: 1234,
                  icon: 'SuccessFilled',
                  color: 'blue'
                  
                },
                {
                  name: '本月支付订单',
                  value: 1234,
                  icon: 'SuccessFilled',
                  color: '#545c64'
                },
                {
                  name: '本月支付订单',
                  value: 1234,
                  icon: 'SuccessFilled',
                  color: '#545c64'
                },
                {
                  name: '本月支付订单',
                  value: 1234,
                  icon: 'SuccessFilled',
                  color: '#545c64'
                },
                {
                  name: '本月支付订单',
                  value: 1234,
                  icon: 'SuccessFilled',
                  color: '#545c64'
                },
                {
                  name: '本月支付订单',
                  value: 1234,
                  icon: 'SuccessFilled',
                  color: '#545c64'
                },
              ])
  const tableLabel = ref(
    {
      name:"课程",
      today: "今日购买",
      month: "本月购买",
      total: "总购买",
    }
  )

  const getTableData =async ()=>{
    const res = await proxy.$api.getTableData()
    tableData.value = res.data.tableData
  }
  const getCountData =async ()=>{
    const res = await proxy.$api.getCountData()
    countData.value =res.data.countData;
  }
  
  onMounted(()=>{
    // getTableData();
    // getCountData();
    // oneChart();
    // twoChart();
    // threeChart();
    // initObServer();
  })
</script>
<style lang="less">
  .home{
    height: 100%;
    overflow: hidden;
    .u-user{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
      .userimg{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 40x;
      }
      .user-info{
        margin-left: 20px;
        p{
          line-height: 30px;
        }
        .user-admin{
          margin-bottom: 1px;
          font-size: 30px;
        }
        .user-chaoji{
          margin-top: 0;
          color: #999;
        }

      }
    }
    .user-table{
      margin-top: 20px;
    }
    .login-info{
      p{
        line-height: 30px;
        font-size: 14px;
        color: #999;

      }
    }
    .use{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .el-card{
        width: 32%;
        margin-bottom: 20px;
        .icons{
          width: 80px;
          height: 80px;
          font-size: 30px;
          text-align: center;
          line-height: 80px;
        }
        .detail{
          margin-left: 15px;
          display: flex;
          justify-content: center;
          flex-direction: column;
          .num{
            margin: 0;
            font-size: 30px;
            margin-bottom: 10px;
          }
          .text{
            margin: 0;
            font-size: 15px;
            margin-bottom: 10px;
            color: #999;
          }
        }
      }
  }
  .one-charts{
    width: 100%;
  }
  .down{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .two-echart{
      width: 100%;
      margin-right: 10px;
    }
    .three-echart{
      width: 100%;
      margin-left: 10px;
    }
  }
} 

</style>
